<template>
  <div class="new-songs">
    <el-row :gutter="24">
      <el-col :span="4">
        <div class="grid-content bg-purple left">
            <div class="left-box">
              1
            </div>
        </div>
        </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple content">
          <div class="center">
             <div class="title">
              <h3><span>热门新碟</span></h3>
            </div>
            <div class="first-dish">
              <ul>
                <li v-for="(item,index) in firstdishs" :key="item.id">
                  <div class="dish-cover" @mouseenter="leavein(index)" @mouseleave="leaveout(index)">
                    <img :src="item.picUrl" alt="" @click="goDetail('/find/newsongs',item.id)">
                    <a href=""><i class="el-icon-video-play" v-if="isShow&&index==current"></i></a>
                  </div>
                  <p class="Disc-name"><a href="">{{item.name}}</a></p>
                  <p class="singer"><a href="">{{item.artist.name}}</a></p>
                </li>
              </ul>
            </div>
            <div class="secound-title">
              <h3>全部新碟</h3>
              <div class="dish-area">
                <span @click="MR">全部&nbsp;&nbsp;|</span>
                <span @click="ZH">&nbsp;&nbsp;华语&nbsp;&nbsp;|</span>
                <span @click="EA">&nbsp;&nbsp;欧美&nbsp;&nbsp;|</span>
                <span @click="KR">&nbsp;&nbsp;韩国&nbsp;&nbsp;|</span>
                <span @click="JP">&nbsp;&nbsp;日本&nbsp;&nbsp;</span>
              </div>
            </div>
            <div class="all-dish">
              <ul>
                <li v-for="(item,index) in alldishs" :key="item.id"  alt=""  @mouseenter="leavein(index)" @mouseleave="leaveout(index)">
                  <div class="dish-cover">
                    <img :src="item.picUrl"  @click="goDetail('/find/newsongs',item.id)">
                    <a href=""><i class="el-icon-video-play" v-show="isShow&&index==current"></i></a>
                  </div>
                  <p class="Disc-name"><a href="">{{item.name}}</a></p>
                  <p class="singer"><a href="">{{item.artist.name}}</a></p>
                </li>
              </ul>
              <el-row :gutter="20">
              <el-col :span="12" :offset="6">
                <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                @prev-click="prev"
                @next-click="next"
                @current-change="change"
                class="page"
                >
              </el-pagination></el-col>
              </el-row>
            </div>
          </div>
        </div>
        </el-col>
      <el-col :span="4"><div class="grid-content bg-purple right">&nbsp;</div></el-col>
  </el-row>  
  </div>
</template>
  
<script>
export default {
  data: () => ({
    firstdishs: [],
    area:'All',
    alldishs: [],
    page:1,
    isShow:false,
    total:150,
    id:'',
    current:0
  }),
  created() {
    this.getFirstDish(),
    this.getAllDish()
  },
  methods: {
    goDetail (url, id) {
          this.$router.push(url + '/' + id)
        },
    leavein (index) {
      this.isShow = true
      this.current= index
    },
    leaveout (index) {
      this.isShow = false
      this.current= null
    },
    async getFirstDish () {
        try {
           const { data: { albums } }= await this.Api.yrnApi.getFirstDish()
           this.firstdishs = albums
           this.firstdishs.splice(-2,2)
        } catch (error) {
          console.log('获取新碟数据失败.....')
        }
    },
    async getAllDish () {
        try {
           const { data: { albums } } = await this.Api.yrnApi.getAllDish(this.area, this.page)
           this.alldishs = albums
        } catch (error) {
          console.log('获取所有新碟数据失败.....')
        }
    },
    prev (){
      this.page--
      this.getAllDish()
    },
    next (){
      this.page++
      this.getAllDish()
    },
    change (page){
      this.page = page;
      this.getAllDish()
    },
    MR () {
      this.area = 'ALL'
      this.getAllDish()
    },
    ZH () {
      this.area = 'ZH'
      this.getAllDish()
    },
    EA () {
      this.area = 'EA'
      this.getAllDish()
    },
    KR () {
      this.area = 'KR'
      this.getAllDish()
    },
    JP () {
      this.area ='JP'
      this.getAllDish()
    }
  },
};
</script>
<style lang="less" scoped>
  .new-songs {
    ul,li {
      list-style: none;
    }
    .left {
      background-color:rgb(245, 245, 245) ;
      .left-box {
        color:(rgb(245, 245, 245) );
      }
    }
    .right {
      background-color:rgb(245, 245, 245) ;
    }
    .content {
      background-color: #fff;
      border-left: 1px solid gray;
      border-right: 1px solid gray;
      .center {
        margin-left: 50px;
        margin-right: 50px;
        .title {
          padding-top:45px;
          border-bottom:2px solid #c20c0c;
          h3 {
            font-size:24px;
            font-weight: normal;
            margin-bottom: 8px;
          }
        }
        .secound-title {
          display: flex;
          align-items:flex-end;
          padding-top:45px;
          border-bottom:2px solid #c20c0c;
          h3 {
            font-size:24px;
            font-weight: normal;
            margin-bottom: 8px;
          }
          .dish-area{
            margin-bottom: 8px;
            span{
            font-size: 14px;
            margin-left: 20px;
          }
          }
          
        }
        .first-dish , .all-dish{
          ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            .dish-cover {
            width: 150px;
            height: 150px;
              img {
              border: 1px solid black;
              width: 100%;
              height: 100%;
              }
              .el-icon-video-play {
                position: relative;;
                left: 120px;
                top: -40px;
                font-size: 35px;
                color: #fff;
              }
            }
            li{
              margin-top: 10px;
              margin-bottom: 20px;
              width: 160px;
            }
            .Disc-name {
              a{
                max-width:160px;
                text-decoration: none;
                display: inline-block;
                vertical-align: middle;
                white-space:nowrap;
                color: #000;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
            .singer {
              margin-top: 5px;
              margin-bottom:5px;
              a {
                text-decoration: none;
                color: #000;
              }
            }
          }         
        }
      }
    }
  }
</style>
